import ProList from '@ant-design/pro-list';
import {
  Button,
  Space,
  Tag,
  Carousel,
  Row,
  Col,
  Table,
  Card,
  Image,
} from 'antd';
import ProCard, { StatisticCard } from '@ant-design/pro-card';
import styles from './index.less';
import type { ReactText } from 'react';
import React, { useState } from 'react';
import GraphChart from './component/GraphChart';
import MiniPie from './component/MiniPie';
import HomeLineChart from './component/HomeLineChart';
import PieChart from './component/PieChart';

const { Statistic, Divider } = StatisticCard;

const contentStyle: React.CSSProperties = {
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};

export default () => {
  const [expandedRowKeys, setExpandedRowKeys] = useState<readonly ReactText[]>(
    [],
  );
  const dataSource123 = [
    {
      key: '1',
      序号: '1',
      姓名: '人员一',
      人员类型: '固定人员',
      性别: '男',
      出生日期: '2000-01-01',
      实验室职务: '实验室主任',
      工作性质: '研究人员',
      职称等级: '正高级',
    },
    {
      key: '2',
      序号: '2',
      姓名: '人员二',
      人员类型: '固定人员',
      性别: '男',
      出生日期: '2000-01-01',
      实验室职务: '实验室主任',
      工作性质: '研究人员',
      职称等级: '正高级',
    },
    {
      key: '3',
      序号: '3',
      姓名: '人员一',
      人员类型: '固定人员',
      性别: '男',
      出生日期: '2000-01-01',
      实验室职务: '实验室主任',
      工作性质: '研究人员',
      职称等级: '正高级',
    },
    {
      key: '4',
      序号: '4',
      姓名: '人员二',
      人员类型: '固定人员',
      性别: '男',
      出生日期: '2000-01-01',
      实验室职务: '实验室主任',
      工作性质: '研究人员',
      职称等级: '正高级',
    },
    {
      key: '5',
      序号: '5',
      姓名: '人员一',
      人员类型: '固定人员',
      性别: '男',
      出生日期: '2000-01-01',
      实验室职务: '实验室主任',
      工作性质: '研究人员',
      职称等级: '正高级',
    },
    {
      key: '6',
      序号: '6',
      姓名: '人员二',
      人员类型: '固定人员',
      性别: '男',
      出生日期: '2000-01-01',
      实验室职务: '实验室主任',
      工作性质: '研究人员',
      职称等级: '正高级',
    },
    {
      key: '7',
      序号: '7',
      姓名: '人员一',
      人员类型: '固定人员',
      性别: '男',
      出生日期: '2000-01-01',
      实验室职务: '实验室主任',
      工作性质: '研究人员',
      职称等级: '正高级',
    },
    {
      key: '8',
      序号: '8',
      姓名: '人员二',
      人员类型: '固定人员',
      性别: '男',
      出生日期: '2000-01-01',
      实验室职务: '实验室主任',
      工作性质: '研究人员',
      职称等级: '正高级',
    },
    {
      key: '9',
      序号: '7',
      姓名: '人员一',
      人员类型: '固定人员',
      性别: '男',
      出生日期: '2000-01-01',
      实验室职务: '实验室主任',
      工作性质: '研究人员',
      职称等级: '正高级',
    },
    {
      key: '10',
      序号: '10',
      姓名: '人员二',
      人员类型: '固定人员',
      性别: '男',
      出生日期: '2000-01-01',
      实验室职务: '实验室主任',
      工作性质: '研究人员',
      职称等级: '正高级',
    },
    {
      key: '11',
      序号: '11',
      姓名: '人员二',
      人员类型: '固定人员',
      性别: '男',
      出生日期: '2000-01-01',
      实验室职务: '实验室主任',
      工作性质: '研究人员',
      职称等级: '正高级',
    },
  ];
  const columns = [
    {
      title: '序号',
      dataIndex: '序号',
      key: '序号',
      // width: 48,
    },
    {
      title: '姓名',
      dataIndex: '姓名',
      key: '姓名',
    },
    {
      title: '人员类型',
      dataIndex: '人员类型',
      key: '人员类型',
    },
    {
      title: '性别',
      dataIndex: '性别',
      key: '性别',
      // width: 48,
    },
    {
      title: '出生日期',
      dataIndex: '出生日期',
      key: '出生日期',
      ellipsis: true,
    },
    {
      title: '实验室职务',
      dataIndex: '实验室职务',
      key: '实验室职务',
    },
    {
      title: '职称等级',
      dataIndex: '职称等级',
      key: '职称等级',
    },
  ];
  const dataSource = [
    {
      title: '综合测试及可靠性增长',
      avatar:
        'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    },
    {
      title: '可靠性分析与设计',
      avatar:
        'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    },
    {
      title: '运行状态监测与评价',
      avatar:
        'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    },
    {
      title: '高性能无线电能传输与电磁能量变换',
      avatar:
        'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    },
  ];
  const committeeDataSource = [
    {
      key: '1',
      序号: '1',
      姓名: '人员一',
      类别: '固定人员',
      性别: '男',
      国别: '中国',
      职称等级: '正高级',
      是否院士: '中国工程院院士',
      工作单位: '西安电子科技大学',
    },
    {
      key: '2',
      序号: '2',
      姓名: '人员一',
      类别: '固定人员',
      性别: '男',
      国别: '中国',
      职称等级: '正高级',
      是否院士: '中国工程院院士',
      工作单位: '西安电子科技大学',
    },
    {
      key: '3',
      序号: '3',
      姓名: '人员一',
      类别: '固定人员',
      性别: '男',
      国别: '中国',
      职称等级: '正高级',
      是否院士: '中国工程院院士',
      工作单位: '西安电子科技大学',
    },
    {
      key: '4',
      序号: '4',
      姓名: '人员一',
      类别: '固定人员',
      性别: '男',
      国别: '中国',
      职称等级: '正高级',
      是否院士: '中国工程院院士',
      工作单位: '西安电子科技大学',
    },
    {
      key: '5',
      序号: '5',
      姓名: '人员一',
      类别: '固定人员',
      性别: '男',
      国别: '中国',
      职称等级: '正高级',
      是否院士: '中国工程院院士',
      工作单位: '西安电子科技大学',
    },
    {
      key: '6',
      序号: '6',
      姓名: '人员一',
      类别: '固定人员',
      性别: '男',
      国别: '中国',
      职称等级: '正高级',
      是否院士: '中国工程院院士',
      工作单位: '西安电子科技大学',
    },
  ];
  const committeeColumns = [
    {
      title: '序号',
      dataIndex: '序号',
      key: '序号',
      // width: 48,
    },
    {
      title: '姓名',
      dataIndex: '姓名',
      key: '姓名',
    },
    {
      title: '类别',
      dataIndex: '类别',
      key: '类别',
    },
    {
      title: '性别',
      dataIndex: '性别',
      key: '性别',
      // width: 48,
    },
    {
      title: '国别',
      dataIndex: '国别',
      key: '国别',
      // width: 48,
    },
    {
      title: '职称等级',
      dataIndex: '职称等级',
      key: '职称等级',
    },
    {
      title: '是否院士',
      dataIndex: '是否院士',
      key: '是否院士',
    },
    {
      title: '工作单位',
      dataIndex: '工作单位',
      key: '工作单位',
    },
  ];
  return (
    <div>
      <Carousel autoplay>
        <div>
          <Image
            height={400}
            width={'100%'}
            preview={false}
            src={require('@/assets/picture/走马灯图片1.jpeg')}
          />
        </div>
        <div>
          <Image
            height={400}
            width={'100%'}
            preview={false}
            src={require('@/assets/picture/走马灯图片2.jpeg')}
          />
        </div>
        <div>
          <Image
            height={400}
            width={'100%'}
            preview={false}
            src={require('@/assets/picture/走马灯图片3.jpeg')}
          />
        </div>
      </Carousel>
      <ProCard.Divider></ProCard.Divider>

      <ProCard title="实验室成果时间分布" style={{ height: 380 }}>
        <HomeLineChart />
      </ProCard>

      <ProCard.Divider></ProCard.Divider>
      <ProCard split={'vertical'}>
        <ProCard split={'horizontal'} colSpan="65%">
          <ProCard title="国重实验室结构">
            <GraphChart />
          </ProCard>
        </ProCard>
        <ProCard split={'horizontal'} colSpan="35%">
          <ProCard title="成果占比">
            <PieChart />
          </ProCard>
        </ProCard>
      </ProCard>
      <ProCard.Divider></ProCard.Divider>
      <ProCard
        tabs={{
          type: 'card',
        }}
        title="国重实验室研究方向"
      >
        <ProCard.TabPane key="tab1" tab="电工装备可靠性理论与失效机理">
          <ProCard split="horizontal">
            <ProCard split={'vertical'}>
              <ProCard
                colSpan={'50%'}
                bodyStyle={{ paddingLeft: 0, paddingTop: 0 }}
              >
                <div>
                  <h3>研究内容</h3>
                  针对电工装备在多能源电网运行状态下的可靠性建模与预测关键科学技术问题，开展电工装备零部件及系统失效演化机理与建模、可靠性分析与设计、运行状态监测与评价等基础研究，为提高电网运行可靠运行奠定理论基础。
                </div>
              </ProCard>
              <ProCard bodyStyle={{ paddingTop: 0 }}>
                <div>
                  <h3>可向社会提供的服务特色</h3>
                  电工装备在复杂运行条件下性能退化规律和损伤累积效应，失效分布规律；电工装备剩余寿命预测和可靠性评价。
                </div>
              </ProCard>
            </ProCard>

            <ProCard split={'vertical'}>
              <ProCard
                title="从属子方向"
                colSpan="50%"
                bodyStyle={{ paddingLeft: 0, paddingRight: 0 }}
                headStyle={{ paddingLeft: 0 }}
              >
                <ProList<{ title: string }>
                  rowKey="title"
                  // expandable={{
                  //   expandedRowKeys,
                  //   onExpandedRowsChange: (e) => {
                  //     console.log(e);
                  //     setExpandedRowKeys(e);
                  //   },
                  // }}
                  split
                  size="small"
                  dataSource={dataSource}
                  metas={{
                    title: {},
                    subTitle: {
                      render: (e) => {
                        // console.log(e);
                        return <Tag color="blue">张三</Tag>;
                      },
                    },
                    // description: {
                    //   render: () => {
                    //     return (
                    //       // <span>123</span>
                    //       <Table
                    //         size="small"
                    //         dataSource={dataSource123}
                    //         columns={columns}
                    //         pagination={false}
                    //         scroll={{
                    //           y: 220,
                    //         }}
                    //       />
                    //     );
                    //   },
                    // },
                    avatar: {},
                  }}
                />
              </ProCard>
              <ProCard colSpan="50%" split={'vertical'}>
                <ProCard split={'horizontal'} colSpan="50%">
                  <ProCard title="职称等级" headStyle={{ fontSize: 6 }}>
                    <MiniPie type={'1'} />
                  </ProCard>
                  <ProCard title="工作性质" headStyle={{ fontSize: 6 }}>
                    <MiniPie type={'2'} />
                  </ProCard>
                </ProCard>

                <ProCard split={'horizontal'} colSpan="50%">
                  <ProCard title="人员类别">
                    <MiniPie type={'3'} />
                  </ProCard>
                  <ProCard title="人才层次">
                    <MiniPie type={'4'} />
                  </ProCard>
                </ProCard>
              </ProCard>
            </ProCard>
          </ProCard>
        </ProCard.TabPane>
        <ProCard.TabPane key="tab2" tab="电工装备电磁综合效应">
          内容二
        </ProCard.TabPane>
        <ProCard.TabPane key="tab3" tab="先进电工材料微结构与性能调控">
          内容一
        </ProCard.TabPane>
        <ProCard.TabPane key="tab4" tab="电工装备状态感知与智能控制">
          内容二
        </ProCard.TabPane>
      </ProCard>
      <ProCard.Divider></ProCard.Divider>

      <ProCard.Divider></ProCard.Divider>
      {/* <ProCard split={'vertical'}>
        <ProCard title="国重实验室结构" colSpan="80%">
          <div>
            <GraphChart />
          </div>
        </ProCard>
      </ProCard> */}
      {/* <ProCard title="可向社会提供的服务特色" >
                <GraphChart />
            </ProCard> */}
      {/* <Table
          columns={committeeColumns}
          dataSource={committeeDataSource}
          pagination={false}
          size="small"
        /> */}
    </div>
  );
};
